<template>
  <!-- 基础题库组件============================================================ -->
  <div>
    <el-card class="box-card">
      <el-row :gutter="16">
        <el-col :span="8" style="color: red"
          >说明：目前支持学科和关键字条件筛选</el-col
        >
        <el-col :span="5"></el-col>
        <el-col :span="3" class="fleotright">
          <el-button
            type="success"
            icon="el-icon-edit"
            @click="$router.push('/question/entering')"
            >新增试题</el-button
          >
        </el-col>
      </el-row>
      <!-- 导入级联选择器组件 -->
      <basics-com @basicsTol="basicsTol"></basics-com>
      <!-- /导入级联选择器组件 -->

      <br />
      <el-alert :title="`数据一共${total}条`" type="info" show-icon> </el-alert>
      <br />
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="number" label="试题编号" width="180">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="180">
        </el-table-column>
        <el-table-column prop="catalog" label="目录"> </el-table-column>
        <el-table-column prop="questionType" label="题型"> </el-table-column>
        <el-table-column label="题干">
          <template slot-scope="scope">
            <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>

        <el-table-column label="录入时间">
          <template slot-scope="scope">
            <div>{{ scope.row.addDate | relativeTime }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度"> </el-table-column>
        <el-table-column prop="creator" label="录入人"> </el-table-column>
        <el-table-column label="操作" v-slot="cosk">
          <!-- 查看 -->
          <el-button
            type="info"
            icon="el-icon-view"
            circle
            @click="charLook(cosk.row)"
          ></el-button>
          <!-- 编辑---需要跳转到试题录入，做一个数据回显 -->
          <el-button
            type="warning"
            icon="el-icon-edit"
            circle
            @click="bianji(cosk.row)"
          ></el-button>
          <!-- 删除 -->
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="romebasica(cosk.row)"
          ></el-button>
          <!-- 加入精选 -->
          <el-button type="success" icon="el-icon-check" circle></el-button>
        </el-table-column>
      </el-table>
      <!-- 分页功能 -->
      <div class="buder">
        <pagi-nation
          :queopin="queopin"
          :total="total"
          @sizeChange="sizeChange($event)"
          @CurrentChange="CurrentChange($event)"
        ></pagi-nation>
      </div>
    </el-card>
    <!-- 引入的dialog组件 -->
    <basics-dialog
      :LookVisible="LookVisible"
      @lookCancel="LookVisible = $event"
      :baseLists="baseLists"
    ></basics-dialog>
  </div>
</template>

<script>
// 导入axios请求
import {
  getBasics,
  geParticulars,
  romeParticulars
} from '@/api/questions/basics'
import basicsCom from '@/views/question/layout/basicsCommp'
import pagiNation from '@/views/question/layout/paging'
// 引入dialog
// import basicsDialog from '@/views/question/layout/Dialog/lookDialog'
// 导入时间处理
import '@/utils/day.js'
// 导入Vuex

export default {
  components: {
    basicsCom,
    pagiNation,
    // basicsDialog
    basicsDialog: () => import('@/views/question/layout/Dialog/lookDialog')
  },
  data() {
    return {
      // 基础题库配置
      queopin: {
        page: 1, // 当前页数
        pagesize: 10, // 页面尺寸
        pages: 1
      },
      quelist: {}, // 基础题库列表
      total: 0, // 数据总条数
      tableData: [], // 表单数据
      // 控制 查看 Dialog 对话框 开关
      LookVisible: false,
      // 存放基础题库详情
      baseLists: {}
    }
  },
  created() {
    // console.log(1)
    this.getBasicsList()
  },
  mounted() {},
  methods: {
    // 基础题库列表
    async getBasicsList() {
      const { data: res } = await getBasics(this.queopin)
      // console.log(res)
      this.tableData = res.items
      this.queopin.page = parseInt(res.page)
      this.queopin.pages = res.pages
      this.queopin.pagesize = parseInt(res.pagesize)
      this.total = res.counts
    },

    // 分页处理
    sizeChange(val) {
      this.queopin.pagesize = val
      this.getBasicsList()
    },
    CurrentChange(val) {
      this.queopin.page = val
      this.getBasicsList()
    },
    basicsTol(e) {
      console.log(e)
      this.total = e.sel
      this.tableData = e.tlis
    },
    // 查看
    async charLook(row) {
      this.LookVisible = true
      // 获取基础题库详情
      // console.log(row.id)
      const { data: res } = await geParticulars(row.id)
      this.baseLists = res
      // console.log(this.baseLists)
    },

    // 编辑
    bianji(row) {
      // 将当前行数据存放的vuex中
      this.$store.commit('clikCompie', row)
      // 路由跳转
      this.$router.push('/question/entering')
    },

    // 删除
    async romebasica(row) {
      // console.log(row)
      // 调用删除接口
      try {
        await romeParticulars(row.id)
        this.$message.success('删除成功')
        this.getBasicsList()
      } catch (e) {
        this.$message.error('删除失败')
        console.log(e)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
  margin-top: 25px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.lef {
  margin-right: -77px;
  margin-left: 60px;
  margin-top: 35px;
  font-weight: 700;
  color: #60666f;
  font-size: 18px;
}
.fleotright {
  float: right;
}
.mlefsel {
  margin-left: -80px;
}
.buttmain {
  margin-right: 15px;
}
.mtp {
  margin-top: -30px;
}
.buder {
  float: right;
  margin-top: 40px;
  margin-bottom: 40px;
}
</style>
